<template>
  <div>
    <el-dialog :title="data.titleName" v-model="data.children_page" :close-on-click-modal='false'
     :append-to-body='true' width="800px">
      <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="150px">
        <!-- <el-form-item v-if="data.isAdd" label="所属系统：" prop="system">
          <el-select v-model="ruleForm.system" @change="changeSystem" placeholder="请选择" style="width:300px;">
            <el-option v-for="item in data.systems" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="用户id：" prop="user_id">
          <el-input v-model.trim="ruleForm.user_id" style="width:300px;" disabled/>
        </el-form-item>
        <el-form-item label="用户名：" prop="username">
          <el-input v-model.trim="ruleForm.username" style="width:300px;" disabled/>
        </el-form-item>
        <el-form-item label="订单编号：" prop="order_sn">
          <el-input v-model.trim="ruleForm.order_sn" style="width:300px;" disabled/> 
        </el-form-item>
        <!-- <el-form-item label="商品id：" prop="goods_id">
          <el-input v-model.trim="ruleForm.goods_id" style="width:300px;" /> 
        </el-form-item> -->
        <el-form-item label="商品名称：" prop="goodsname">
          <el-input v-model.trim="ruleForm.goodsname" style="width:300px;" disabled/> 
        </el-form-item>
        <el-form-item label="过期时间：" prop="expire_at">
          <el-date-picker
        v-model="ruleForm.expire_at"
        type="datetime"
        placeholder="Select date and time"
      />
          <el-input v-model.trim="ruleForm.expire_at" style="width:300px;" /> 
        </el-form-item>
        <el-form-item label="实价：" prop="amount">
          <el-input v-model.trim="ruleForm.amount" style="width:300px;" /> 
        </el-form-item>
        <el-form-item label="支付方式：" prop="pay_way">
          <el-input v-model.trim="ruleForm.pay_way" style="width:300px;" /> 
        </el-form-item>
        <el-form-item label="订单状态：" prop="status">
          <el-input v-model.trim="ruleForm.status" style="width:300px;" /> 
        </el-form-item>
        <el-form-item label="创建时间：" prop="created_at">
          <el-input v-model.trim="ruleForm.created_at" style="width:300px;" /> 
        </el-form-item>

        <el-form-item>
          <el-button @click="data.children_page = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
// import UploadImg from "./Upload/Img.vue";
  import {
    orderData,
  } from '../../../api/index';
  import {
    ElMessage,
    ElTree
  } from "element-plus";
  // import type { FormInstance } from 'element-plus' 
  import {
    ref,
    reactive,
    nextTick,
    // defineProps,//defineProps声明props;具备完整的类型推断;<script setup>直接可用
    // defineEmits,//defineEmits声明事件;具备完整的类型推断;<script setup>直接可用
    // defineExpose//暴露出去;<script setup>直接可用
  } from 'vue';



  const test1 = ref('')
const test2 = ref('')
// const test1=(v:any)=>{
//   console.log("接收到子组件的值",v)
//   alert(2);
// }
  const ruleFormRef = ref();//表单ref
  //获取tree选中的值
  const treeRef = ref < InstanceType < typeof ElTree >> ();
  const emit = defineEmits(["onItemChange"]);//声明事件(父级页面上添加的 @监听事件)

  //数据双向绑定;复杂类型数据=>响应式数据
  const data = reactive({
    titleName: '',
    checkAll: false,
    children_page: false,
    isAdd: false,
    systems: [{
      name: '开发1部',
      id: 'water'
    }, {
      name: '市场部',
      id: 'pollution'
    }],
    nowKeys: [] as any[], // 属性需要做类型断言处理 //树-选中数据
    treeDatas: [], //树-总数据
    id: '',
  });
  //ts类型断言
  //定义类型
  interface User {

    type: string
    key: string
    id: string

    user_id: string;
    username: string;
		order_sn: string;
		goods_id: string;
    goodsname: string;
		expire_at: string;
		coupon_id:string;
		origin_amount:string;
		amount:string;
		pay_way:string;
		status:string;
		created_at:string;
  };
  const ruleForm = reactive({
    
    user_id: "",
    username: "",
		order_sn: "",
		goods_id: "",
    goodsname: "",
		expire_at: "",
		coupon_id:"",
		origin_amount:"",
		amount:"",
		pay_way:"",
		status:"",
		created_at:"",
  });
  const rules = ref({
    username: [{
        required: true,
        message: '请输入角色名称',
        trigger: 'blur'
      },
      {
        min: 1,
        max: 50,
        message: '长度在 1 到 50 个字符',
        trigger: 'blur'
      }
    ],
    
  });
  //父调子的子
  const addItemShow = (now_name: string) => {
    data.titleName = '添加';
    data.children_page = true;
    data.isAdd = true;
    


    ruleForm.user_id = '';
    ruleForm.username = '';
    ruleForm.order_sn = '';
    ruleForm.goods_id = '';
    ruleForm.goodsname = '';
    ruleForm.expire_at = '';
    ruleForm.coupon_id = '';
    ruleForm.origin_amount = '';
    ruleForm.amount = '';
    ruleForm.pay_way = '';
    ruleForm.status = '';
    ruleForm.created_at = '';
    data.nowKeys = []; //树-选中数据
    nextTick(() => {
    ruleFormRef.value.resetFields();//重置表单
    })
  };
  //父调子的子
  const addItemShow2 = (row: User, now_name: string) => {
    console.log(row)
    console.log(now_name)
    data.titleName = '编辑';
    data.children_page = true;
    data.isAdd = false;
    nextTick(() => {
      ruleFormRef.value.resetFields();//重置表单
      ruleForm.user_id = '';
    ruleForm.username = '';
    ruleForm.order_sn = '';
    ruleForm.goods_id = '';
    ruleForm.goodsname = '';
    ruleForm.expire_at = '';
    ruleForm.coupon_id = '';
    ruleForm.origin_amount = '';
    ruleForm.amount = '';
    ruleForm.pay_way = '';
    ruleForm.status = '';
    ruleForm.created_at = '';

      ruleForm.user_id = row.user_id;    
      ruleForm.username = row.username;    
      ruleForm.order_sn = row.order_sn;    
      ruleForm.goods_id = row.goods_id;    
      ruleForm.goodsname = row.goodsname;    
      ruleForm.expire_at = row.expire_at;    
      ruleForm.coupon_id = row.coupon_id;    
      ruleForm.origin_amount = row.origin_amount;    
      ruleForm.amount = row.amount;    
      ruleForm.pay_way = row.pay_way;    
      ruleForm.status = row.status;    
      ruleForm.created_at = row.created_at;
      data.id = row.id;
      data.nowKeys = [] //树-选中数据
      data.treeDatas = [] //树-总数据
    })
  };



  //添加/修改   : FormInstance | undefined
  const onSubmit = async (formEl:any) => {
    if (!formEl) return
    formEl.validate((valid:any) => {
      if (valid) {
        if (data.isAdd) { 
          addRoles();
        } else {
          changeRoles();
        }
      } else {
        return false;
      }
    });
  };








// ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
        // 使用ref包裹的数据，需要通过 .value 的形式访问他的值
  const addRoles = () => { 
    let params = {
      action: 'apiadd',
    user_id: ruleForm.user_id,
    // username: ruleForm.username,
    order_sn: ruleForm.order_sn,
      goods_id: ruleForm.goods_id,
      // goodsname: ruleForm.goodsname,
      expire_at: ruleForm.expire_at,
      coupon_id: ruleForm.coupon_id,
      origin_amount: ruleForm.origin_amount,
      amount: ruleForm.amount,
      pay_way: ruleForm.pay_way,
      status: ruleForm.status,
      created_at: ruleForm.created_at,
     
    }
    orderData(params).then(res => {
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
        data.children_page = false;
        emit("onItemChange");
      } else if (res.status  !== 200) {
        ElMessage.error(res.statusText);
      }
    })
  };
  //修改接口
  const changeRoles = () => {
    let params = {
      action: 'apiedit',
      id: data.id,
      user_id: ruleForm.user_id,
    // username: ruleForm.username,
    order_sn: ruleForm.order_sn,
      goods_id: ruleForm.goods_id,
      // goodsname: ruleForm.goodsname,
      expire_at: ruleForm.expire_at,
      coupon_id: ruleForm.coupon_id,
      origin_amount: ruleForm.origin_amount,
      amount: ruleForm.amount,
      pay_way: ruleForm.pay_way,
      status: ruleForm.status,
      created_at: ruleForm.created_at,
      // menuIds: treeRef.value!.getCheckedKeys(false),
    }
    orderData(params).then(res => {
      console.log(res)
      console.log(res.status)
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
        data.children_page = false;
        emit("onItemChange");
      } else if (res.status  !== 200) {
        ElMessage.error(res.statusText);
      }
    })
  };
  defineExpose({
    addItemShow,
    addItemShow2
  }) //将子组件方法暴露出来，让父组件调用
</script>
<style scoped>
  .jurisdiction-border {
    width: 500px;
    height: 300px;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
  }
 
  .jurisdiction-border::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgb(241, 241, 241);
    border-radius: 3px;
  }
 
  .jurisdiction-border::-webkit-scrollbar-thumb {
    background-color: rgb(193, 193, 193);
    border-radius: 3px;
  }
 
  /* .tree-name-leave {
    margin-leave: 5px;
  } */
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>